import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import Message from '../Message'
import News from '../News'

export default class Home extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <Link to="/home/news">News</Link>
            </li>
            <li>
              <Link to="/home/message">Message</Link>
            </li>
          </ul>
          <div>
            <div>
              {/* <News></News>
              <Message></Message> */}
              {/* <Route path="/home/news" component={News}></Route>
              <Route path="/home/message" component={Message}></Route> */}
              {this.props.childs.map((item) => {
                return (
                  <Route
                    key={item.path}
                    path={item.path}
                    // component={item.component}
                    render={(props) => {
                      return <item.component {...props} childs={item.children}></item.component>
                    }}
                  ></Route>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    )
  }
}
